<template>
  <footer class="kz-footer">
    <div class="footer-body">
      <div class="fbodykz kz-fl">
        <h3>推荐栏目</h3>
        <div class="kz-footer-tj menu-a">
          <a v-for="item in recommendedLinks" :key="item.name" :href="item.url" target="_blank">{{ item.name }}</a>
        </div>
      </div>

      <div class="fbodykz kz-shejiao">
        <h3>联系方式</h3>
        <div class="menu-b">
          <p>TG：<a :href="contact.TG.url" target="_blank">{{ contact.TG.name }}</a></p>
          <p>X：<a target="_blank" :href="contact.X.url">{{ contact.X.number }}</a></p>
        </div>
      </div>

      <div class="fbodykz fr">
        <h3>关于小镇</h3>
        <div class="menu-b">
          <p>{{ about.description }}</p>
        </div>
      </div>
    </div>

    <div class="footer-tow">
      <p class="footer_copyright">

        <a :href="sitemapUrl" target="_blank">网站地图</a>
        <a :href="licenseUrl" target="_blank"></a>.
      </p>
      <div class="footer-logo">
        <a :href="footerLogoUrl">
          <img :src="footerLogoSrc" alt="樱花小镇">
        </a>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: 'Footer',
  data() {
    return {
      recommendedLinks: [
        { name: 'COSPLAY', url: '/cosplay' },
      ],
      contact: {
        weibo: { name: '新浪微博', url: '#' },
        TG: { number: '', url: '' },
        X: { name: 'DIMTOWN', url: '' },
      },
      about: {
        description: '美图壁纸、音乐和cosplay资源的小站，阿宅们快到碗里来ヽ(✿ﾟ▽ﾟ)ノ',
      },
      sitemapUrl: '#',
      licenseUrl: '',
      footerLogoUrl: '#',
      footerLogoSrc: '',
    };
  },
};
</script>
<style scoped>
.kz-footer {
    background-image: linear-gradient(to right, #770fe7 0%, #30eb94 100%);
    -webkit-background-clip: text; /* 用于Safari */
    background-clip: text;
    color: transparent; /* 使文本颜色透明，显示背景渐变 */
  width: 100%; /* 自动适应宽度 */
//width: 1400px; text-align: center;
  backdrop-filter: blur(3px) brightness(88%);
  //background-color: rgba(255, 255, 255, 0.33);
  border-radius: 10px;
  padding: 20px 0 40px;
}

.footer-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}

.fbodykz {
  flex: 1;
  margin: 10px;
}

.kz-footer-tj a,
.menu-b a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
}

.kz-footer-tj a:hover,
.menu-b a:hover {
  text-decoration: underline;
}

.menu-b p {
  margin: 0 0 10px;
}

.kz-fl {
  text-align: left;
}

.kz-shejiao {
  text-align: center;
}

.fr {
  text-align: right;
}

.footer-tow {
}

.footer_copyright {
  margin: 10px 0;
  font-size: 14px;
}

.footer-logo img {
  max-width: 100px; /* 控制Logo的大小 */
}
</style>
